<template>
    <div>
        <div class="category-content">
            <div class="top-content">
                <span class="text">分类名称</span>
                <span class="text">分类备注</span>
                <router-link :to="{name:'Business_category_add'}">新增</router-link>
            </div>
            <div class="bottom-content">
                <div class="same-box" v-for="item in cates" :key="item.id">
                    <div class="left">
                        {{item.name}}
                    </div>
                    <div class="center">
                        {{item.remark}}
                    </div>
                    <div class="right">
                        <router-link :to="{name:'Business_category_edit',params:{id:item.id}}" class="bianji">编辑</router-link>
                        <a @click="delcate(item.id)" class="delete">删除</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                cates: []
            }
        },
        methods: {
            loadcates: function () {
                this.$http.get(this.APIURL_PREFIX + '/api/wap/goodsTypeCustom/page?page=1').then((response) => {
                    console.log(response.data)
                    this.cates = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
            },
            delcate: function (id) {
                let vm=this
                layer.confirm('您确定删除该分类吗？', {
                    btn : [ '确定', '取消' ]//按钮
                }, function() {
                   //  var index = layer.load(0,{shade: [0.7, '#393D49']}, {shadeClose: true})
                   vm.$http.delete(vm.APIURL_PREFIX + '/api/wap/goodsTypeCustomDelete/' + id).then((response) => {
                        console.log(response.data);
                        vm.cates = vm.cates.filter(function (item) { console.log(id == item.id); return id != item.id });
                        layer.msg("删除成功")
                   }).catch(function (err) {
                        layer.msg("删除失败");
                        console.log(err)
                    });
                });
            }
        },
        mounted() {
            this.loadcates()
        },
        components: {
        }
    }
</script>
<style scoped>
    .bottom-content {
        background: #ffffff;
    }

    input {
        border: none;
        height: 10px;
    }

    body {
        background: #ffffff;
    }

    .category-content {
        width: 100%;
        overflow: hidden;
    }

        .category-content .top-content {
            height: 2rem;
            width: 100%;
            background: #f2f2f2;
            line-height: 2rem;
            display: flex;
        }

            .category-content .top-content a {
                border: 1px solid #ff0808;
                height: 1rem;
                line-height: 1rem;
                width: 2.25rem;
                color: #ff0808;
                margin-top: 0.5rem;
                margin-right: 0.5rem;
            }

            .category-content .top-content .text {
                width: 33.33%;
                text-align: center;
                display: block;
                height: 2rem;
                line-height: 2rem;
                margin-right: auto;
            }

        .category-content .bottom-content {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

            .category-content .bottom-content .same-box {
                width: 100%;
                height: 2.5rem;
                overflow: hidden;
                /* line-height:2.5rem; */
                display: flex;
            }

                .category-content .bottom-content .same-box .left {
                    width: 33.33%;
                    height: 2.5rem;
                    text-align: center;
                    line-height: 2.5rem;
                }

                .category-content .bottom-content .same-box .center {
                    line-height: 2.5rem;
                    width: 33.33%;
                }

                .category-content .bottom-content .same-box .right {
                    width: 33.33%;
                    text-align: center;
                }

                .category-content .bottom-content .same-box input {
                    width: 100%;
                    height: 2.5rem;
                    text-align: center;
                    display: block;
                }

                .category-content .bottom-content .same-box .right a {
                    display: inline-block;
                    width: 2rem;
                    height: 1.25rem;
                    background: #ff7200;
                    font-size: 12px;
                    color: #ffffff;
                    text-align: center;
                    line-height: 1.25rem;
                    border-radius: 3px;
                    margin-top: 0.5rem;
                }

                    .category-content .bottom-content .same-box .right a.bianji {
                        margin-right: 0.2rem;
                    }

                    .category-content .bottom-content .same-box .right a.delete {
                        background: #ff2626;
                    }
</style>
